<template>
  <div class="el-input">

    <textarea
      v-if="show"
      placeholder="请输入内容"
      :value="text"
      rows="50"
      class="blogwritter"
      @change="convertText"
      @input="$emit('input', $event.target.value)">
    </textarea>
      <el-button icon="el-icon-s-flag" @click="show = !show" v-if="show">预览</el-button>

    <div v-html="html" v-if="!show" class="preview"></div>

    <el-button icon="el-icon-edit" @click="show = !show" v-if="!show">编辑</el-button>

  </div>

</template>

<script>
import showdown from 'showdown'
export default {
  name: "BlogMarkdown",
  components: {
    showdown
  },
  props: {
    text: {
      type: String,
    }
  },
  data() {
    return {
      show: true,
      converter: {},
      html: '',
    }
  },
  methods: {
    convertText() {
      this.html = this.converter.makeHtml(this.$props.text)
      console.log(this.html)
    }
  },
  mounted() {
    this.converter = new showdown.Converter()
  }
}
</script>

<style scoped>

.blogwritter {
  resize: none;
  width: 100%;
  border-radius: 5px;
  border-color: #dcdfe6;
  overflow: auto;
  word-break: break-all;
}

.blogwritter:focus {
  border-color: cornflowerblue;
  border-width: 1px;
  outline: 0;
}

.preview {
  width: 100%;
  height: 100px;
  border: 1px solid #dcdfe6;
  border-radius: 5px;
}

</style>
